/* Modal Sheet 基础样式 */
.modal-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Overlay 动画由 Framer Motion 处理 */

/* Modal Sheet 容器 */
.modal-sheet {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(1);
}

/* 可拖拽模式下的弹框样式 */
.modal-sheet--draggable {
  position: relative; /* 确保可以通过transform移动 */
  cursor: default; /* 内容区域恢复默认光标 */
}

/* 位置样式 - 明确设置每个方向的圆角朝向 */
.modal-sheet--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100vw;
  /* 底部弹出：顶部圆角，底部贴边无圆角 */
  border-radius: 12px 12px 0 0;
}

.modal-sheet--top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100vw;
  /* 顶部弹出：底部圆角，顶部贴边无圆角 */
  border-radius: 0 0 12px 12px;
}

.modal-sheet--left {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  max-height: 100vh;
  /* 左边弹出：右边圆角，左边贴边无圆角 */
  border-radius: 0 12px 12px 0;
}

.modal-sheet--right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  max-height: 100vh;
  /* 右边弹出：左边圆角，右边贴边无圆角 */
  border-radius: 12px 0 0 12px;
}

/* 尺寸样式 */
.modal-sheet--small {
  width: 400px;
  height: auto;
  min-height: 200px;
  max-height: 60vh;
}

.modal-sheet--medium {
  width: 600px;
  height: auto;
  min-height: 300px;
  max-height: 70vh;
}

/* Snap Points模式下禁用min-height，允许完全自由的高度控制 */
.modal-sheet--snap-points.modal-sheet--small,
.modal-sheet--snap-points.modal-sheet--medium,
.modal-sheet--snap-points.modal-sheet--large,
.modal-sheet--snap-points.modal-sheet--full,
.modal-sheet--snap-points.modal-sheet--auto {
  min-height: 0 !important;
  max-height: none !important;
}

/* 普通拖拽模式下也需要类似的优化，确保拖拽时没有CSS限制 */
.modal-sheet--dragging.modal-sheet--small,
.modal-sheet--dragging.modal-sheet--medium,
.modal-sheet--dragging.modal-sheet--large,
.modal-sheet--dragging.modal-sheet--full,
.modal-sheet--dragging.modal-sheet--auto {
  min-height: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Snap Points模式下的拖拽条增强样式 */
.modal-sheet--snap-points .modal-sheet__drag-area {
  background: rgba(0, 0, 0, 0.02) !important; /* 非常轻微的背景 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; /* 更淡的分割线 */
  padding: 8px 16px !important; /* 减少内边距 */
  position: relative !important;
  z-index: 20 !important; /* 确保在最上层 */
  order: -999 !important; /* 默认强制在最前面 */
  min-height: 32px !important; /* 降低最小高度 */
  display: flex !important; /* 强制显示 */
  visibility: visible !important; /* 强制可见 */
  opacity: 1 !important; /* 强制不透明 */
  width: calc(100% - 2px) !important; /* 减少宽度避免突出 */
  margin: 0 1px !important; /* 添加左右边距 */
  justify-content: center !important; /* 居中对齐 */
  align-items: center !important; /* 垂直居中 */
  transition: background-color 0.2s ease !important; /* 平滑过渡 */
}

/* 悬停效果 */
.modal-sheet--snap-points .modal-sheet__drag-area:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* 顶部弹出的悬停效果 */
.modal-sheet--snap-points.modal-sheet--top .modal-sheet__drag-area:hover {
  /* 只改变背景色，不改变边框 */
  background: rgba(0, 0, 0, 0.04) !important;
}

/* 强制修复Modal的overflow问题 */
.modal-sheet--snap-points {
  overflow: visible !important; /* 强制可见，防止拖拽条被隐藏 */
}

/* 顶部弹出也需要overflow修复 */
.modal-sheet--top {
  overflow: visible !important; /* 确保拖拽条不被裁剪 */
}

.modal-sheet--snap-points .modal-sheet__drag-indicator {
  width: 36px !important; /* 稍微窄一点 */
  height: 3px !important; /* 更薄 */
  background: rgba(0, 0, 0, 0.3) !important; /* 简单的单色，不要渐变 */
  border-radius: 1.5px !important; /* 圆角 */
  box-shadow: none !important; /* 移除阴影 */
  transition: all 0.2s ease !important; /* 平滑过渡 */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 拖拽指示器悬停效果 */
.modal-sheet--snap-points .modal-sheet__drag-area:hover .modal-sheet__drag-indicator {
  background: rgba(0, 0, 0, 0.4) !important; /* 悬停时稍微深一点 */
  transform: scaleX(1.1) !important; /* 水平放大而不是垂直 */
}


.modal-sheet--large {
  width: 800px;
  height: auto;
  min-height: 400px;
  max-height: 80vh;
}

.modal-sheet--full {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

.modal-sheet--auto {
  width: auto;
  height: auto;
  min-width: 300px;
  min-height: 200px;
}

/* 底部和顶部位置的尺寸调整 */
.modal-sheet--bottom.modal-sheet--small,
.modal-sheet--top.modal-sheet--small {
  height: 40vh;
}

.modal-sheet--bottom.modal-sheet--medium,
.modal-sheet--top.modal-sheet--medium {
  height: 60vh;
}

.modal-sheet--bottom.modal-sheet--large,
.modal-sheet--top.modal-sheet--large {
  height: 80vh;
}

.modal-sheet--bottom.modal-sheet--auto,
.modal-sheet--top.modal-sheet--auto {
  height: auto;
  max-height: 80vh;
}

/* 左右位置的尺寸调整 */
.modal-sheet--left.modal-sheet--small,
.modal-sheet--right.modal-sheet--small {
  width: 320px;
}

.modal-sheet--left.modal-sheet--medium,
.modal-sheet--right.modal-sheet--medium {
  width: 480px;
}

.modal-sheet--left.modal-sheet--large,
.modal-sheet--right.modal-sheet--large {
  width: 640px;
}

.modal-sheet--left.modal-sheet--auto,
.modal-sheet--right.modal-sheet--auto {
  width: auto;
  max-width: 60vw;
}

/* 动画样式由 Framer Motion 处理，这里只保留必要的样式 */

/* Header 样式 */
.modal-sheet__header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.modal-sheet__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.4;
}

.modal-sheet__close-button {
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  transition: all 200ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.modal-sheet__close-button:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.modal-sheet__close-button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Body 样式 */
.modal-sheet__body {
  padding: 20px 24px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-sheet__body--scrollable {
  overflow-y: auto;
}

/* Footer 样式 */
.modal-sheet__footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #e5e7eb;
  background: white;
  flex-shrink: 0;
  display: flex;
  gap: 12px;
}

.modal-sheet__footer--left {
  justify-content: flex-start;
}

.modal-sheet__footer--center {
  justify-content: center;
}

.modal-sheet__footer--right {
  justify-content: flex-end;
}

.modal-sheet__footer--space-between {
  justify-content: space-between;
}

/* 拖拽样式 */
.modal-sheet--draggable {
  cursor: move;
}

.modal-sheet--dragging {
  user-select: none;
  transition: none !important;
  /* 确保在拖拽时内联样式的transform能正确应用 */
  will-change: transform;
}

.modal-sheet__drag-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 4px;
  background-color: #d1d5db;
  border-radius: 2px;
  cursor: grab;
}

.modal-sheet__drag-handle:active {
  cursor: grabbing;
}

/* 调整大小样式 */
.modal-sheet--resizable {
  resize: both;
  overflow: auto;
}

/* 基础调整大小手柄样式 */
.modal-sheet__resize-handle {
  position: absolute;
  z-index: 100; /* 增加 z-index 确保手柄在最上层 */
  transition: background-color 0.2s ease;
  /* 确保手柄可以接收鼠标事件 */
  pointer-events: auto;
  /* 添加关键的显示属性 */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 角落调整大小手柄（对角线方向） */
.modal-sheet__resize-handle--se,
.modal-sheet__resize-handle--sw,
.modal-sheet__resize-handle--ne,
.modal-sheet__resize-handle--nw {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* 边缘调整大小手柄（单方向） */
.modal-sheet__resize-handle--n,
.modal-sheet__resize-handle--s {
  left: 50%;
  transform: translateX(-50%);
  width: 60px !important;
  height: 6px !important;
  min-width: 60px !important;
  min-height: 6px !important;
}

.modal-sheet__resize-handle--e,
.modal-sheet__resize-handle--w {
  top: 50%;
  transform: translateY(-50%);
  width: 6px !important;
  height: 60px !important;
  min-width: 6px !important;
  min-height: 60px !important;
}

/* 右下角（默认） */
.modal-sheet__resize-handle--se {
  bottom: -3px;
  right: -3px; /* 向内收缩，避免凸出 */
  border-radius: 0 0 12px 0;
  background: linear-gradient(
    -45deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent 60%
  );
}

/* 左下角 */
.modal-sheet__resize-handle--sw {
  bottom: -3px;
  left: -3px;
  border-radius: 0 0 0 12px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent 60%
  );
}

/* 右上角 */
.modal-sheet__resize-handle--ne {
  top: -3px;
  right: -3px; /* 向内收缩，避免凸出 */
  border-radius: 0 12px 0 0;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent 60%
  );
}

/* 左上角 */
.modal-sheet__resize-handle--nw {
  top: -3px;
  left: -3px;
  border-radius: 12px 0 0 0;
  background: linear-gradient(
    -45deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent 60%
  );
}

/* 顶部边缘 */
.modal-sheet__resize-handle--n {
  top: -3px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 50%
  );
  border-radius: 0 0 3px 3px;
}

/* 底部边缘 */
.modal-sheet__resize-handle--s {
  bottom: -3px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 50%
  );
  border-radius: 3px 3px 0 0;
}

/* 右边缘 */
.modal-sheet__resize-handle--e {
  right: -3px; /* 向内收缩，避免凸出 */
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 50%
  );
  border-radius: 3px 0 0 3px;
}

/* 左边缘 */
.modal-sheet__resize-handle--w {
  left: -3px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 50%
  );
  border-radius: 0 3px 3px 0;
}

/* 悬停效果 */
.modal-sheet__resize-handle:hover {
  opacity: 0.8;
}

.modal-sheet__resize-handle:active {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-sheet {
    max-width: 95vw;
    max-height: 95vh;
  }

  .modal-sheet--small,
  .modal-sheet--medium,
  .modal-sheet--large {
    width: 100vw;
    /* 在移动端，不同位置的圆角由位置特定的样式控制 */
  }

  .modal-sheet--bottom {
    border-radius: 12px 12px 0 0;
  }

  .modal-sheet--top {
    border-radius: 0 0 12px 12px;
  }

  .modal-sheet--left {
    border-radius: 0 12px 12px 0;
  }

  .modal-sheet--right {
    border-radius: 12px 0 0 12px;
  }

  /* 移动端：左右弹出的拖拽条空间调整 */
  .modal-sheet--left .modal-sheet__header,
  .modal-sheet--left .modal-sheet__body,
  .modal-sheet--left .modal-sheet__footer {
    padding-right: 36px; /* 20px + 16px */
  }

  .modal-sheet--right .modal-sheet__header,
  .modal-sheet--right .modal-sheet__body,
  .modal-sheet--right .modal-sheet__footer {
    padding-left: 36px; /* 20px + 16px */
  }

  .modal-sheet__header {
    padding: 16px 20px 12px;
  }

  .modal-sheet__body {
    padding: 16px 20px;
  }

  .modal-sheet__footer {
    padding: 12px 20px 16px;
  }

  /* 确保左右弹出的padding优先级更高 */
  .modal-sheet--left .modal-sheet__body {
    padding: 16px 36px 16px 20px; /* 右边留出拖拽条空间 */
  }

  .modal-sheet--left .modal-sheet__footer {
    padding: 12px 36px 16px 20px; /* 右边留出拖拽条空间 */
  }

  .modal-sheet--right .modal-sheet__body {
    padding: 16px 20px 16px 36px; /* 左边留出拖拽条空间 */
  }

  .modal-sheet--right .modal-sheet__footer {
    padding: 12px 20px 16px 36px; /* 左边留出拖拽条空间 */
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .modal-sheet {
    background: #1f2937;
    color: #f9fafb;
  }

  .modal-sheet__header {
    background: #1f2937;
    border-bottom-color: #374151;
  }

  .modal-sheet__title {
    color: #f9fafb;
  }

  .modal-sheet__close-button {
    color: #9ca3af;
  }

  .modal-sheet__close-button:hover {
    background-color: #374151;
    color: #d1d5db;
  }

  .modal-sheet__footer {
    background: #1f2937;
    border-top-color: #374151;
  }

  .modal-sheet__drag-handle {
    background-color: #4b5563;
  }

  .modal-sheet__resize-handle {
    background: linear-gradient(
      -45deg,
      transparent 0%,
      transparent 40%,
      #4b5563 40%,
      #4b5563 60%,
      transparent 60%
    );
  }
}

/* 无障碍支持 */
.modal-sheet:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

/* 动画性能优化 */
.modal-sheet,
.modal-sheet-overlay {
  will-change: transform, opacity;
}

/* 滚动锁定 */
.modal-sheet-scroll-lock {
  overflow: hidden !important;
}

/* Snap Points 相关样式 */
.modal-sheet--snap-points {
  /* 允许高度和宽度的过渡动画 */
  transition-property: height, width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 拖拽区域样式 - 基础样式 */
.modal-sheet__drag-area {
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* 🎨 增强视觉反馈 */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* 🎯 拖拽状态增强 */
.modal-sheet__drag-area:hover {
  /* 轻微的背景变化提示可交互 */
  background-color: rgba(0, 0, 0, 0.03) !important;
  transform: translateY(-1px); /* 轻微上浮效果 */
}

.modal-sheet__drag-area:active {
  cursor: grabbing;
  transform: translateY(0px); /* 按下时回归原位 */
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* 🔥 拖拽进行时的全局状态 */
.modal-sheet--dragging .modal-sheet__drag-area {
  cursor: grabbing;
  background-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 🎯 键盘焦点样式 */
.modal-sheet__drag-area:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
  background-color: rgba(0, 123, 204, 0.05) !important;
  box-shadow: 
    0 0 0 4px rgba(0, 123, 204, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

.modal-sheet__drag-area:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0.03) !important;
}

.modal-sheet__drag-area:focus-visible {
  outline: 2px solid #007acc;
  outline-offset: 2px;
  background-color: rgba(0, 123, 204, 0.05) !important;
}

/* 拖拽指示器 - 基础样式 */
.modal-sheet__drag-indicator {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; /* 让事件穿透到父元素 */
  position: relative;
  /* 默认尺寸，会被位置特定的样式覆盖 */
  width: 40px;
  height: 4px;
  /* 🎨 增强可见性和质感 */
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  /* 🔥 添加渐变效果 */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.4) 0%, 
    rgba(0, 0, 0, 0.5) 50%, 
    rgba(0, 0, 0, 0.4) 100%);
}

/* 🎯 悬停时的拖拽指示器增强效果 */
.modal-sheet__drag-area:hover .modal-sheet__drag-indicator {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.6) 0%, 
    rgba(0, 0, 0, 0.7) 50%, 
    rgba(0, 0, 0, 0.6) 100%);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: scaleX(1.05); /* 轻微水平拉伸 */
}

/* 🔥 拖拽时的指示器效果 */
.modal-sheet--dragging .modal-sheet__drag-indicator {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.7) 0%, 
    rgba(0, 0, 0, 0.8) 50%, 
    rgba(0, 0, 0, 0.7) 100%);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: scaleX(1.1); /* 更明显的拉伸效果 */
}

/* 增强拖拽指示器的可见性 - 保留作为备用效果 */
.modal-sheet__drag-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-sheet__drag-area:hover .modal-sheet__drag-indicator::after {
  opacity: 1;
}

/* 🎨 增强左右拖拽条的视觉反馈 */
.modal-sheet--left .modal-sheet__drag-area,
.modal-sheet--right .modal-sheet__drag-area {
  /* 基础背景，确保可见 */
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.02) 0%, 
    rgba(0, 0, 0, 0.04) 50%, 
    rgba(0, 0, 0, 0.02) 100%);
  /* 添加边框提示 */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.modal-sheet--left .modal-sheet__drag-area:hover,
.modal-sheet--right .modal-sheet__drag-area:hover {
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.05) 0%, 
    rgba(0, 0, 0, 0.08) 50%, 
    rgba(0, 0, 0, 0.05) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  transform: scaleX(1.1); /* 水平拉伸 */
}

.modal-sheet--left .modal-sheet__drag-area:active,
.modal-sheet--right .modal-sheet__drag-area:active {
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.08) 0%, 
    rgba(0, 0, 0, 0.12) 50%, 
    rgba(0, 0, 0, 0.08) 100%);
  border-color: rgba(0, 0, 0, 0.15);
  transform: scaleX(1.05);
}

/* 底部弹出：拖拽条在顶部（头朝上） */
.modal-sheet--bottom .modal-sheet__drag-area {
  width: calc(100% - 33px); /* 减少宽度避免突出 */
  margin: 0 1px; /* 添加左右边距 */
  padding: 12px 16px;
  order: -1; /* 放在最前面 */
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.03) 0%, 
    rgba(0, 0, 0, 0.02) 100%); /* 渐变背景 */
  border-radius: 11px 11px 0 0; /* 稍微减小圆角，避免突出 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* 分割线 */
}

.modal-sheet--bottom .modal-sheet__drag-area:hover {
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.06) 0%, 
    rgba(0, 0, 0, 0.04) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.modal-sheet--bottom .modal-sheet__drag-indicator {
  width: 40px;
  height: 4px;
}

/* 顶部弹出：拖拽条在底部（头朝下） */
.modal-sheet--top .modal-sheet__drag-area {
  width: calc(100% - 33px); /* 减少宽度避免突出 */
  margin: 0 1px; /* 添加左右边距 */
  padding: 8px 16px; /* 与Snap Points保持一致 */
  order: 999; /* 放在最后面 */
  background: linear-gradient(0deg, 
    rgba(0, 0, 0, 0.03) 0%, 
    rgba(0, 0, 0, 0.02) 100%); /* 渐变背景 */
  border-radius: 0 0 11px 11px; /* 稍微减小圆角，避免突出 */
  border-top: 1px solid rgba(0, 0, 0, 0.06); /* 分割线 */
  min-height: 32px; /* 与Snap Points保持一致 */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: center;
  align-items: center;
}

.modal-sheet--top .modal-sheet__drag-area:hover {
  background: linear-gradient(0deg, 
    rgba(0, 0, 0, 0.06) 0%, 
    rgba(0, 0, 0, 0.04) 100%);
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* 重要：确保Snap Points的顶部弹出规则不被普通顶部规则覆盖 */
.modal-sheet--snap-points.modal-sheet--top .modal-sheet__drag-area {
  order: 999 !important; /* 放在最后面，覆盖通用的-999，并且不被普通top规则覆盖 */
  border-bottom: none !important; /* 移除底部边框 */
  border-top: none !important; /* 移除顶部边框，避免缝隙 */
  /* 临时强制样式，确保一定显示在底部 */
  position: relative !important;
  z-index: 999 !important;
  background: rgba(0, 0, 0, 0.02) !important; /* 确保有背景 */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal-sheet--top .modal-sheet__drag-area:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.modal-sheet--top .modal-sheet__drag-indicator {
  width: 36px; /* 与Snap Points保持一致 */
  height: 3px; /* 与Snap Points保持一致 */
  background: rgba(0, 0, 0, 0.3); /* 与Snap Points保持一致 */
  border-radius: 1.5px;
}

/* 左边弹出：拖拽条在右边（头朝右） */
.modal-sheet--left .modal-sheet__drag-area {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(10% - 33px); /* 减少宽度避免突出 */
  padding: 16px 6px;
  flex-direction: column;
  z-index: 10; /* 确保拖拽条在内容之上 */
  background: rgba(0, 0, 0, 0.02); /* 轻微背景，确保可见 */
}

.modal-sheet--left .modal-sheet__drag-indicator {
  width: 4px;
  height: 40px;
}

/* 左边弹出：为内容区域留出拖拽条空间 */
.modal-sheet--left .modal-sheet__header {
  padding-right: 40px; /* 24px + 16px */
}

.modal-sheet--left .modal-sheet__body {
  padding-right: 40px; /* 24px + 16px */
}

.modal-sheet--left .modal-sheet__footer {
  padding-right: 40px; /* 24px + 16px */
}

/* 右边弹出：拖拽条在左边（头朝左） */
.modal-sheet--right .modal-sheet__drag-area {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  padding: 16px 6px;
  flex-direction: column;
  z-index: 10; /* 确保拖拽条在内容之上 */
  background: rgba(0, 0, 0, 0.02); /* 轻微背景，确保可见 */
}

.modal-sheet--right .modal-sheet__drag-indicator {
  width: 4px;
  height: 40px;
}

/* 右边弹出：为内容区域留出拖拽条空间 */
.modal-sheet--right .modal-sheet__header {
  padding-left: 40px; /* 24px + 16px */
}

.modal-sheet--right .modal-sheet__body {
  padding-left: 40px; /* 24px + 16px */
}

.modal-sheet--right .modal-sheet__footer {
  padding-left: 40px; /* 24px + 16px */
}

/* Snap Points 位置特定样式 */
.modal-sheet--snap-points.modal-sheet--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100vh;
  border-radius: 12px 12px 0 0; /* 修复：使用统一的12px圆角 */
}

.modal-sheet--snap-points.modal-sheet--top {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100vh;
  border-radius: 0 0 12px 12px; /* 修复：使用统一的12px圆角 */
}

.modal-sheet--snap-points.modal-sheet--left {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  max-width: 100vw;
  border-radius: 0 12px 12px 0; /* 修复：使用统一的12px圆角 */
}

/* Snap Points 左边弹出：为内容留出拖拽条空间 */
.modal-sheet--snap-points.modal-sheet--left .modal-sheet__header {
  padding-right: 40px; /* 24px + 16px */
}

.modal-sheet--snap-points.modal-sheet--left .modal-sheet__body {
  padding-right: 40px; /* 24px + 16px */
}

.modal-sheet--snap-points.modal-sheet--left .modal-sheet__footer {
  padding-right: 40px; /* 24px + 16px */
}

.modal-sheet--snap-points.modal-sheet--right {
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  max-width: 100vw;
  border-radius: 12px 0 0 12px; /* 修复：使用统一的12px圆角 */
}

/* Snap Points 右边弹出：为内容留出拖拽条空间 */
.modal-sheet--snap-points.modal-sheet--right .modal-sheet__header {
  padding-left: 40px; /* 24px + 16px */
}

.modal-sheet--snap-points.modal-sheet--right .modal-sheet__body {
  padding-left: 40px; /* 24px + 16px */
}

.modal-sheet--snap-points.modal-sheet--right .modal-sheet__footer {
  padding-left: 40px; /* 24px + 16px */
}
